<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-13 19:28:33
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-17 15:32:19
 * @Description: 
-->
<template>
  <div class="content">
    <el-card shadow="hover">
      <template #header> 发布公告 </template>

      <el-form ref="formRef" :rules="rules" :model="form" label-position="top">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="是否置顶" prop="is_sticky">
          <el-radio-group v-model="form.is_sticky" class="ml-4">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden"
              v-model="form.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item>
          <el-button
            class="btn-1"
            type="primary"
            style="width: 100%"
            size="large"
            round
            @click.prevent="onSubmit"
            >发 布</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script setup>
import { ref, reactive, onBeforeUnmount, shallowRef } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { notice } from "@/api";

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 表单实例
const formRef = ref(null);
const form = reactive({
  title: "",
  is_sticky: 0,
  content: "",
});

const checkContent = (rule, value, callback) => {
  console.log(form.content);
  if (form.content === "<p><br></p>") {
    return callback(new Error("请输入公告内容"));
  }
  callback();
};

// 验证规则
const rules = reactive({
  title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
  is_sticky: [{ required: true, message: "请输入是否置顶", trigger: "blur" }],
  content: [{ required: true, validator: checkContent, trigger: "blur" }],
});

// 发布公告
const onSubmit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res = await notice.release(form);
      if (res.status) {
        ElMessage.success("发布成功");
        return;
      }
      ElMessage.error(res.msg);
      return;
    } else {
      console.log(fields);
    }
  });
};
</script>

<style lang='less' scoped>
</style>